<template>
  <el-tabs v-model="activeName" class="tabs1" type="card" @tab-click="handleClick">
    <el-dialog title="视频" :visible.sync="dialogVideoVisible">
      <div ref="rotate" style="width:100%;height:600px;text-align:center" class="circle">
        <video-player
          ref="videoPlayer"
          :options="playerOptions"
          :playsinline="true"
          format="yyyy-MM-dd"
          custom-event-name="customstatechangedeventname"
          style="width:100%;height:600px;text-align:center"
          class="video-player vjs-custom-skin"
        />
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="rotate($event)">旋 转</el-button>
        <el-button type="primary" @click="dialogVideoVisible = false">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="车300初版" :visible.sync="che300FirsrAble">
      <div v-if="che300Data!=null" class="xxx">
        <table class="che300table">
          <tr>
            <td class="td_title">品牌:</td>
            <td class="td_value">{{ che300Data.brand_name }}</td>
          </tr>
          <tr>
            <td class="td_title">车系:</td>
            <td class="td_value">{{ che300Data.series_name }}</td>
          </tr>
          <tr>
            <td class="td_title">车型:</td>
            <td class="td_value">{{ che300Data.model_name }}</td>
          </tr>
          <tr>
            <td class="td_title">车牌号:</td>
            <td class="td_value">{{ che300Data.plate_no }}</td>
          </tr>

          <tr>
            <td class="td_title">所在城市:</td>
            <td class="td_value">{{ che300Data.city_name }}</td>
          </tr>
          <tr>
            <td class="td_title">⻋商零售价:</td>
            <td class="td_value">{{ che300DataFirstPrice.dealer_price }}万元</td>
          </tr>
          <tr>
            <td class="td_title">⻋商最⾼零售价:</td>
            <td class="td_value">{{ che300DataFirstPrice.dealer_high_sold_price }}万元</td>
          </tr>
          <tr>
            <td class="td_title">⻋商最低零售价:</td>
            <td class="td_value">{{ che300DataFirstPrice.dealer_low_sold_price }}万元</td>
          </tr>
          <tr>
            <td class="td_title">个⼈间交易价:</td>
            <td class="td_value">{{ che300DataFirstPrice.individual_price }}万元</td>
          </tr>

          <tr>
            <td class="td_title">个⼈最低交易价:</td>
            <td class="td_value">{{ che300DataFirstPrice.individual_low_sold_price }}万元</td>
          </tr>
          <tr>
            <td class="td_title">⻋商收⻋价:</td>
            <td class="td_value">{{ che300DataFirstPrice.dealer_buy_price }}万元</td>
          </tr>
          <tr>
            <td class="td_title">⻋商最低收⻋价:</td>
            <td class="td_value">{{ che300DataFirstPrice.dealer_low_buy_price }}万元</td>
          </tr>

        </table>
      </div>
    </el-dialog>
    <!-- <el-dialog title="车300详版版" :visible.sync="che300DetailAble">
      <div class="xxx" v-if="che300Data!=null">

      </div>
    </el-dialog> -->

    <el-tab-pane label="预审" class="yyy" name="first">
      <div class="xxx">
        <el-row class=" infolist_top">
          <el-col :span="24">
            <div ref="viewer" v-viewer="viewerOptions" class="">
              <div v-for="(item,index) in customer_info.img" :key="index" class="grid-content bg-purple-light img_box">
                <div class="hovers">{{ item.field }}</div>
                <img :src="item.path" height="100%" width="100%">
              </div>
            </div>
          </el-col>
        </el-row>
        <div class="box">
          <div v-if="nodes.indexOf('138')!=-1" class="l_title">大数据报告</div>
          <el-row v-if="nodes.indexOf('138')!=-1" class="infolist infolist_top">
            <el-col :span="5"><a style="color:#66cccc" @click="bigdataDownLoad(order_id)">查看报告</a></el-col>
          </el-row>
          <div v-if="nodes.indexOf('139')!=-1" class="l_title">车300初版</div>
          <el-row v-if="nodes.indexOf('139')!=-1" class="infolist infolist_top">
            <el-col :span="5"><a style="color:#66cccc" @click="che300(order_id,1)">查看报告</a></el-col>
          </el-row>
          <div class="l_title">基本信息</div>
          <el-row class="infolist infolist_top">
            <el-col :span="5">客户姓名：{{ customer_info.real_name }}</el-col>
            <el-col :span="5">电话：{{ customer_info.mobile }}</el-col>
            <el-col :span="9">身份证号码：{{ customer_info.idcard }}</el-col>
          </el-row>
          <el-row class="infolist infolist_top">
            <el-col :span="5">性别：{{ customer_info.sex }}</el-col>
            <el-col :span="5">民族：{{ customer_info.nation }}</el-col>
            <el-col :span="5">婚姻：{{ customer_info.marriage }}</el-col>
            <el-col :span="5">学历：{{ customer_info.education }}</el-col>
          </el-row>

          <el-row class="infolist infolist_top">
            <el-col :span="10">身份证地址：{{ customer_info.family_address }}</el-col>
            <el-col :span="8">现居地址：{{ customer_info.now_address }}</el-col>
            <!-- <el-col :span="3">家庭人数：{{ customer_info.family_numer }}</el-col>
            <el-col :span="3">子女人数：{{ customer_info.children_number }}</el-col> -->
          </el-row>

          <div class="l_title">车辆信息</div>
          <el-row class="infolist infolist_top">
            <el-col :span="5">品牌：{{ customer_info.project.brand_name }}</el-col>
            <el-col :span="5">车系：{{ customer_info.project.model_name }}</el-col>
            <el-col :span="5">车型：{{ customer_info.project.model_name }}</el-col>
            <el-col :span="5">使用性质：{{ customer_info.cardetail.switch_from_service }}</el-col>
          </el-row>
          <el-row class="infolist infolist_top">
            <el-col :span="5">车辆类型：{{ customer_info.cardetail.car_type }}</el-col>
            <el-col :span="5">车牌号：{{ customer_info.project.plate_no }}</el-col>
            <el-col :span="5">车架号：{{ customer_info.project.vin }}</el-col>
            <el-col :span="5">发动机号：{{ customer_info.project.engine_no }}</el-col>
          </el-row>
          <el-row class="infolist infolist_top">
            <el-col :span="5">注册日期：{{ customer_info.project.issue_date }}</el-col>
            <el-col :span="5">行驶里程(万公里)：{{ customer_info.project.km }}</el-col>
            <el-col :span="5">车身颜色：{{ customer_info.cardetail.color }}</el-col>
            <el-col :span="5">车重(吨)：{{ customer_info.cardetail.weight }}</el-col>
          </el-row>
          <el-row class="infolist infolist_top">
            <el-col :span="5">所在城市：{{ customer_info.cardetail.city_name }}</el-col>
          </el-row>
          <div class="l_title">产品信息</div>
          <el-row v-if="customer_info.goods" class="infolist infolist_top">
            <el-col :span="5">ID：{{ customer_info.goods.id }}</el-col>
            <el-col :span="5">产品名称：{{ customer_info.goods.name }}</el-col>
            <el-col :span="5">利率：{{ customer_info.goods.rate }}</el-col>
          </el-row>
          <el-row v-if="customer_info.goods" class="infolist infolist_top">
            <el-col :span="5">GPS费用：{{ customer_info.goods.gps }}</el-col>
            <el-col :span="5">流量费：{{ customer_info.goods.flow }}</el-col>
          </el-row>
          <div class="l_title">房产信息</div>
          <el-row class="infolist infolist_top">
            <el-col :span="5">房产状况：{{ customer_info.house }}</el-col>
            <el-col :span="5">房产所在地{{ customer_info.house_address }}</el-col>

          </el-row>
          <div class="l_title">工作信息</div>
          <el-row v-if="customer_info.work" class="infolist infolist_top">
            <el-col :span="5">公司名称：{{ customer_info.work.company }}</el-col>
            <el-col :span="5">公司所在地：{{ customer_info.work.company_address }}</el-col>
            <el-col :span="5">公司电话：{{ customer_info.work.company_mobile }}</el-col>
          </el-row>
          <el-row v-if="customer_info.work" class="infolist infolist_top">
            <el-col :span="5">职位：{{ customer_info.work.position }}</el-col>
            <el-col :span="5">月薪(元)：{{ customer_info.work.salary }}</el-col>
          </el-row>
          <div class="l_title" />
          <el-form v-if="order_detail.order_status==10" ref="dataForm" :model="form" label-width="120px" :rules="rules" class="myform" style="width: 500px;border:1px solid #eee;margin-left: 5px;">
            <el-form-item label="审核结果" prop="order_status">
              <el-radio-group v-model="form.order_status">
                <el-radio label="11">通过</el-radio>
                <el-radio label="100">退改</el-radio>
                <el-radio label="1000">拒绝</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="通过成数" prop="total_percentage">
              <el-input v-model="form.total_percentage" type="number" />
            </el-form-item>
            <el-form-item label="备注">
              <el-input v-model="form.content" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="returnOrderSubmit()">确定</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </el-tab-pane>
    <el-tab-pane label="复审" class="yyy" name="fourth">
      <div class="xxx">
        <el-row class="infolist infolist_top">
          <el-col :span="24">
            <div ref="viewer" v-viewer="viewerOptions" class="">
              <div class="ima_title">进件信息</div>
              <div v-for="(item,index) in imagesData.income" :key="index">
                <div v-for="(v,k) in item" :key="k" class="grid-content bg-purple-light img_box">
                  <div class="hovers">{{ v.field }}</div>
                  <img :src="v.path" height="100%" width="100%">
                </div>
              </div>

            </div>
          </el-col>
          <el-col :span="24">
            <div ref="viewer" v-viewer="viewerOptions" class="">

              <div class="ima_title">车辆图片</div>
              <div v-for="(item,index) in imagesData.project" :key="index" class="grid-content bg-purple-light img_box">
                <div class="hovers">{{ item.field }}</div>
                <img v-if="item.field!=''" :src="item.path" height="100%" width="100%">
                <video
                  v-if="item.field==''"
                  :src="item.path"
                  preload="none"
                  type="video/mp4"
                  height="100%"
                  width="100%"
                  poster="http://ydl.rongyiht.com./file/image/20231020/d033b17e260dcdadb0bd0073a8bfed52.png"
                  @click="openVideoDialog(item.path)"
                />
              </div>
            </div>
          </el-col>
          <el-col v-if="nodes.indexOf('137')!=-1" :span="24">
            <div ref="viewer" v-viewer="viewerOptions" class="">
              <div class="ima_title">车300详版报告</div>
              <a style="color:#66cccc" @click="che300(order_id,2)">查看报告</a>
            </div>
          </el-col>

          <el-col :span="24">
            <div ref="viewer" v-viewer="viewerOptions" class="">
              <!-- <div class="ima_title">审核</div> -->
              <el-form v-if="order_detail.order_status==23||order_detail.order_status==21" ref="dataForm" :model="form" label-width="120px" :rules="rules" class="myform" style="width: 500px;border:1px solid #eee;margin-left: 5px;">
                <el-form-item label="审核结果" prop="order_status">
                  <el-radio-group v-model="form.order_status">
                    <el-radio label="31">通过</el-radio>
                    <el-radio label="200">退改</el-radio>
                    <el-radio label="1000">拒绝</el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item label="期数" prop="total_period">
                  <el-input v-model="form.total_period" type="number" />
                </el-form-item>
                <el-form-item label="备注">
                  <el-input v-model="form.content" />
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="returnOrderSubmit()">确定</el-button>
                </el-form-item>
              </el-form>
            </div>
          </el-col>
        </el-row>

      </div>

    </el-tab-pane>
    <el-tab-pane v-if="nodes.indexOf('139')!=-1" label="制单" class="yyy" name="nineth">
      <div class="xxx">
        <el-tabs v-model="activeNameContract" @tab-click="handleLogClick">
          <el-tab-pane label="合同申请资料" name="nine_second">
            <el-form ref="contract_form" :model="contract_form" label-width="120px" style="width: 500px;">
              <!-- <el-form-item v-if="orderInfo.order_status==23" label="费率" prop="rate" >
                <el-input v-model="form.rate" type="number" value="0.0115"/>
              </el-form-item> -->

              <el-form-item label="申请金额">
                <el-input v-model="contract_apply_data.apply_money" readonly="readonly" />
              </el-form-item>
              <el-form-item label="申请期数">
                <el-input v-model="contract_apply_data.total_period" readonly="readonly" />
              </el-form-item>
              <el-form-item label="每期租金">
                <el-input v-model="contract_apply_data.a_month_price" readonly="readonly" />
              </el-form-item>
              <el-form-item label="开户账号">
                <el-input v-model="contract_apply_data.bank_number" readonly="readonly" />
              </el-form-item>
              <el-form-item label="收款人">
                <el-input v-model="contract_apply_data.person" readonly="readonly" />
              </el-form-item>
              <el-form-item label="开户地址">
                <el-input v-model="contract_apply_data.bank_address" readonly="readonly" />
              </el-form-item>
              <el-form-item label="加融期数">
                <el-input v-model="contract_apply_data.jiarong_qs" />
              </el-form-item>
              <el-form-item label="每期加融金额">
                <el-input v-model="contract_apply_data.jiarong_money" />
              </el-form-item>
            </el-form>
            <el-row class=" infolist_top" style="margin-left:50px">
              <el-col :span="24">
                <div ref="viewer" v-viewer="viewerOptions" class="">

                  <el-form v-if="order_detail.order_status==24" ref="dataForm" :model="form" label-width="120px" :rules="rules" class="myform" style="width: 500px;border:1px solid #eee;margin-left: 5px;">
                    <el-form-item label="审核结果" prop="order_status">
                      <el-radio-group v-model="form.order_status">
                        <el-radio label="40">通过</el-radio>
                        <el-radio label="400">退改</el-radio>
                        <el-radio label="1000">拒绝</el-radio>
                      </el-radio-group>
                    </el-form-item>

                    <el-form-item label="备注">
                      <el-input v-model="form.content" />
                    </el-form-item>
                    <el-form-item>
                      <el-button type="primary" @click="returnOrderSubmit()">确定</el-button>
                    </el-form-item>
                  </el-form>
                </div>
              </el-col>
            </el-row>
          </el-tab-pane>
          <el-tab-pane label="合同资料补录" name="nine_third">
            <el-form ref="contract_form" :model="contract_form" label-width="120px" style="width: 500px;" :rules="rules">
              <!-- <el-form-item v-if="orderInfo.order_status==23" label="费率" prop="rate" >
                <el-input v-model="form.rate" type="number" value="0.0115"/>
              </el-form-item> -->
              <el-form-item label="选择公司" prop="company_id">
                <el-select v-model="contract_form.company_id" placeholder="选择公司" filterable class="filter-item">
                  <el-option label="选择公司" value="" />
                  <el-option
                    v-for="item in company"
                    :key="item.id"
                    :label="item.company_name"
                    :value="item.id"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="转让总价" prop="all_price">
                <el-input v-model="contract_form.all_price" @change="countMoney(1)"/>
              </el-form-item>
              <el-form-item label="融资金额" prop="total_price">
                <el-input v-model="contract_form.total_price" type="number"  @change="countMoney(1)"/>
              </el-form-item>
              <el-form-item label="首付金额" prop="first_price">
                <el-input v-model="contract_form.first_price" type="number" />
              </el-form-item>
              
              <el-form-item label="期数" prop="total_period">
                <el-input v-model="contract_form.total_period" type="number"  @change="countMoney(2)"/>
              </el-form-item>
              <el-form-item label="利率" prop="rate">
                <el-input v-model="contract_form.rate" type="number" max="1" @change="countMoney(3)"/>
              </el-form-item>
              <el-form-item label="每期流量费" prop="flow">
                <el-input v-model="contract_form.flow" type="number" max="1" @change="countMoney(3)"/>
              </el-form-item>

              <el-form-item label="每期租金" prop="a_month_price">
                <el-input v-model="contract_form.a_month_price" type="number"  @change="countMoney(2)"/>
              </el-form-item>
              <el-form-item label="每期本金" prop="benjin">
                <el-input v-model="contract_form.benjin" type="number" max="1"  @change="countMoney(3)"/>
              </el-form-item>
              <el-form-item label="每期租金收益" prop="money_rate">
                <el-input v-model="contract_form.money_rate" type="number" max="1" @change="countMoney(3)"/>
              </el-form-item>
            
              <el-form-item label="每期天数" prop="days">
                <el-input v-model="contract_form.days" type="number" />
              </el-form-item>
              <el-form-item label="首期支付日" prop="first_payment_day">
                <el-date-picker v-model="contract_form.first_payment_day" format="yyyy-MM-dd" type="datetime" placeholder="首期支付日" />
              </el-form-item>
            
              <el-form-item label="租金总额" prop="count_price">
                <el-input v-model="contract_form.count_price" type="number" />
              </el-form-item>
              <el-form-item label="租赁保证金" prop="bzj">
                <el-input v-model="contract_form.bzj" type="number"  @change="countMoney(3)"/>
              </el-form-item>
              <el-form-item label="租赁杂费" prop="zlzf">
                <el-input v-model="contract_form.zlzf" type="number"  @change="countMoney(3)"/>
              </el-form-item>
              <el-form-item label="租赁手续费" prop="zlsxf">
                <el-input v-model="contract_form.zlsxf" type="number"  @change="countMoney(3)"/>
              </el-form-item>
              <el-form-item label="GPS使用费" prop="gps">
                <el-input v-model="contract_form.gps" type="number"  @change="countMoney(3)"/>
              </el-form-item>
              <el-form-item label="外访考察费" prop="wfkcf">
                <el-input v-model="contract_form.wfkcf" type="number"  @change="countMoney(3)"/>
              </el-form-item>
              <el-form-item label="违章压金" prop="wzyj">
                <el-input v-model="contract_form.wzyj" type="number"  @change="countMoney(3)"/>
              </el-form-item>
              <el-form-item label="预留价款" prop="qqkhj">
                <el-input v-model="contract_form.yljk" type="number"  @change="countMoney(3)"/>
              </el-form-item>
              <el-form-item label="前期款合计" prop="qqkhj">
                <el-input v-model="contract_form.qqkhj" type="number" />
              </el-form-item>

              <el-form-item>
                <el-button type="primary" @click="returnContractDatarSubmit('contract_form')">立即创建</el-button>
                <el-button>取消</el-button>
              </el-form-item>

            </el-form>
          </el-tab-pane>

          <el-tab-pane label="线下合同审核" name="nine_first">

            <div style="width: 400px;height: auto;border:1px solid #eee;padding: 30px;margin-left:20%;border-radius:10px;text-align:center">
              <el-row>
                <el-col :span="24">
                  <div v-if="ordercontract!=[]" class="grid-content bg-purple-dark">
                    <div v-for="(v,k) in ordercontract" :key="k" style="height: 50px;border-bottom: 1px solid #eee;line-height: 50px;">
                      <span style="color:#66cccc;cursor: pointer;" @click="download(v.first)">{{ v.first_name }}</span>&nbsp;&nbsp;&nbsp;&nbsp;
                      <el-button type="danger" icon="el-icon-delete" circle size="mini" style="margin-left: 30px;" @click="deleteContract(v.id)" />
                    </div>
                  </div>
                </el-col>
              </el-row>
              <el-upload
                style="text-align:center;margin-top:50px"
                class="upload-demo"
                drag
                accept="application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document,application/pdf"
                :action="UploadUrl()"
                :on-success="UploadSuccessFIrst"
                multiple
              >
                <i class="el-icon-upload" />
                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                <div slot="tip" class="el-upload__tip">请上传docx/pdf文件</div>
              </el-upload>
              <div class="downloadComtractModel" @click="downloadDocx(1)">基础合同模板下载</div>
              <div class="downloadComtractModel" @click="downloadDocx(2)">抵押合同模板下载</div>
            </div>

          </el-tab-pane>

        </el-tabs>

      </div>
    </el-tab-pane>
    <el-tab-pane label="终审" class="yyy" name="fifth">
      <div v-if="request_funds!=null" class="xxx">

        <div class="box">
          <div class="l_title">请款信息</div>
          <el-row class="infolist infolist_top">
            <el-col :span="6">收款账号：{{ request_funds.bank_number }}</el-col>
            <el-col :span="6">收款人：{{ request_funds.person }}</el-col>
            <el-col :span="9">开户行地址：{{ request_funds.bank_address }}</el-col>
          </el-row>
          <el-row class="infolist infolist_top">
            <el-col :span="6">融资金额：{{ order_detail.total_price }}万元</el-col>
            <el-col :span="6">转账金额：{{ order_detail.dkje }}</el-col>
            <el-col :span="6">前期款合计：{{ order_detail.qqkhj }}</el-col>
          </el-row>
        </div>
        <el-row class=" infolist_top" style="margin-left:50px">
          <el-col :span="24">
            <div ref="viewer" v-viewer="viewerOptions" class="">
              <div class="ima_title">合同类</div>
              <div v-for="(item,index) in imagesData.contract" :key="index">
                <div v-for="(v,k) in item" :key="k" class="grid-content bg-purple-light img_box">
                  <div class="hovers">{{ v.field }}</div>
                  <img :src="v.path" height="100%" width="100%">
                </div>
              </div>
              <div class="img_box">
                <el-upload
                  class="avatar-uploader"
                  list-type="picture-card"
                  :show-file-list="false"
                  :action="UploadUrl()"
                  :on-success="handSuccess"
                  :multiple="true"
                  :data="{field:'contract'}"
                  accept="image/*"
                >
                  <i class="el-icon-plus avatar-uploader-icon" />
                </el-upload>
              </div>
            </div>
          </el-col>
        </el-row>
        <el-row class=" infolist_top" style="margin-left:50px">
          <el-col :span="24">
            <div ref="viewer" v-viewer="viewerOptions" class="">
              <div class="ima_title">抵押信息</div>
              <div v-for="(item,index) in request_funds.mortgage" :key="index" class="grid-content bg-purple-light img_box">
                <img :src="item.path" height="100%" width="100%">
              </div>
              <div class="img_box">
                <el-upload
                  class="avatar-uploader"
                  list-type="picture-card"
                  :show-file-list="false"
                  :action="UploadUrl()"
                  :on-success="handSuccess"
                  :multiple="true"
                  :data="{field:'mortgage'}"
                  accept="image/*"
                >
                  <i class="el-icon-plus avatar-uploader-icon" />
                </el-upload>
              </div>
            </div>
          </el-col>
        </el-row>
        <el-row class=" infolist_top" style="margin-left:50px">
          <el-col :span="24">
            <div ref="viewer" v-viewer="viewerOptions" class="">
              <div class="ima_title">GPS</div>
              <div v-for="(item,index) in request_funds.gps_img" :key="index" class="grid-content bg-purple-light img_box">
                <img :src="item.path" height="100%" width="100%">
              </div>
              <div class="img_box">
                <el-upload
                  class="avatar-uploader"
                  list-type="picture-card"
                  :show-file-list="false"
                  :action="UploadUrl()"
                  :on-success="handSuccess"
                  :multiple="true"
                  :data="{field:'gps_img'}"
                  accept="image/*"
                >
                  <i class="el-icon-plus avatar-uploader-icon" />
                </el-upload>
              </div>
            </div>
          </el-col>
        </el-row>
        <!-- <el-row class=" infolist_top" style="margin-left:50px">
          <el-col :span="24">
            <div ref="viewer" class="" v-viewer="viewerOptions">
              <div class="ima_title">拍司令</div>
                <div  class="grid-content bg-purple-light img_box" v-for="(item,index) in request_funds.psl_img" :key="index">
                <img :src="item.path" height="100%" width="100%" >
                </div>
            </div>
          </el-col>
        </el-row> -->
        <el-row class=" infolist_top" style="margin-left:50px">
          <el-col :span="24">
            <div ref="viewer" v-viewer="viewerOptions" class="">
              <div class="ima_title">视频</div>
              <div v-for="(item,index) in request_funds.video" :key="index" class="grid-content bg-purple-light img_box">
                <video
                  :src="item.path"
                  preload="none"
                  type="video/mp4"
                  height="100%"
                  width="100%"
                  poster="http://ydl.rongyiht.com./file/image/20231020/d033b17e260dcdadb0bd0073a8bfed52.png"
                  @click="openVideoDialog(item.path)"
                />
              </div>
              <div class="img_box">
                <el-upload
                  class="avatar-uploader"
                  list-type="picture-card"
                  :show-file-list="false"
                  :action="UploadUrl()"
                  :on-success="handSuccess"
                  :multiple="true"
                  :data="{field:'video'}"
                  accept="video/*"
                >
                  <i class="el-icon-plus avatar-uploader-icon" />
                </el-upload>
              </div>
            </div>
          </el-col>
        </el-row>
        <el-row class=" infolist_top" style="margin-left:50px">
          <el-col :span="24">
            <div ref="viewer" v-viewer="viewerOptions" class="">
              <div class="ima_title">其他考察资料</div>
              <div v-for="(item,index) in request_funds.other" :key="index" class="grid-content bg-purple-light img_box">
                <img :src="item.path" height="100%" width="100%">
              </div>
              <div class="img_box">
                <el-upload
                  class="avatar-uploader"
                  list-type="picture-card"
                  :show-file-list="false"
                  :action="UploadUrl()"
                  :on-success="handSuccess"
                  :multiple="true"
                  :data="{field:'other'}"
                  accept="image/*"
                >
                  <i class="el-icon-plus avatar-uploader-icon" />
                </el-upload>
              </div>
            </div>
          </el-col>
        </el-row>
        <el-row class=" infolist_top" style="margin-left:50px">
          <el-col :span="24">
            <div ref="viewer" v-viewer="viewerOptions" class="">

              <el-form v-if="order_detail.order_status==34" ref="dataForm" :model="form" label-width="120px" :rules="rules" class="myform" style="width: 500px;border:1px solid #eee;margin-left: 5px;">
                <el-form-item label="审核结果" prop="order_status">
                  <el-radio-group v-model="form.order_status">
                    <el-radio label="35">通过</el-radio>
                    <el-radio label="300">退改</el-radio>
                    <el-radio label="1000">拒绝</el-radio>
                  </el-radio-group>
                </el-form-item>

                <el-form-item label="备注">
                  <el-input v-model="form.content" />
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="returnOrderSubmit()">确定</el-button>
                </el-form-item>
              </el-form>
            </div>
          </el-col>
        </el-row>
        <el-row class=" infolist_top" style="margin-left:50px">
          <el-col :span="24">
            <div ref="viewer" v-viewer="viewerOptions" class="">

              <el-form v-if="order_detail.order_status==35" ref="dataForm" :model="desc_form" label-width="120px" :rules="rules" class="myform" style="width: 500px;border:1px solid #eee;margin-left: 5px;">
                <el-form-item label="备注">
                  <el-input v-model="desc_form.desc" type="textarea" />
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="descAdminUpload()">确认备注</el-button>
                </el-form-item>
              </el-form>
            </div>
          </el-col>
        </el-row>
      </div>
    </el-tab-pane>

    <el-tab-pane label="日志" class="yyy" name="sixth">
      <div class="xxx">
        <el-tabs v-model="activeNameLog" @tab-click="handleLogClick">
          <el-tab-pane label="订单日志" name="log_first">
            <el-table
              :data="orderRecord.order_log"
              stripe
              style="width: 100%"
            >
              <el-table-column
                prop="create_time"
                label="时间"
              />
              <el-table-column
                prop="content"
                label="内容"
              />
              <el-table-column
                prop="type"
                label="类型"
              />
              <el-table-column
                prop="name"
                label="操作人"
              />
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="还款日志" name="log_second">
            <el-table
              :data="orderRecord.pay_log"
              stripe
              style="width: 100%"
            >
              <el-table-column
                prop="create_time"
                label="还款时间"
              />
              <el-table-column
                prop="num"
                label="期数"
              />
              <el-table-column
                prop="out_trade_no"
                label="订单号"
              />
              <el-table-column
                prop="total_money"
                label="还款金额"
              />

            </el-table>
          </el-tab-pane>
          <el-tab-pane label="纠错日志" name="log_third">
            <el-table
              :data="orderRecord.do_log"
              stripe
              style="width: 100%"
            >
              <el-table-column
                prop="create_time"
                label="操作时间"
              />
              <el-table-column
                prop="user_name"
                label="操作人"
              />
              <el-table-column
                prop="obj"
                label="操作内容"
              />
            </el-table>
          </el-tab-pane>
        </el-tabs>

      </div>
    </el-tab-pane>
  </el-tabs>

</template>

<script>

import {
  getRequestFunds, getche300Data, getImagesData, getOrderRecord, returnContractDatarSubmit, bigdataDownLoad, downloadDocx, UploadFileAdmin,
  fetchOrderDetail, contractUpload, getOrcerContract, contractDataAddDetail, contractApplyDetail, submitCheckStatus, deleteContract
} from '@/api/order'
import {
  getCustomerInfo
} from '@/api/customer'
import {
  getNodes
} from '@/utils'
import 'video.js/dist/video-js.css'
import 'vue-video-player/src/custom-theme.css'
import {
  videoPlayer
} from 'vue-video-player'
import {
  formatDate
} from '@/utils/formatDate.js'
import {
  parse
} from 'path-to-regexp'
export default {
  components: {
    videoPlayer // 注册组件
  },
  filters: {

  },
  data() {
    return {
      desc_form: {
        field: 'desc',
        desc: ''
      },
      che300FirsrAble: false,
      dialogVideoVisible: false,
      contract_apply_data: {
        bank_number: ''
      },
      action: process.env.VUE_APP_BASE_API + '/backend_upload',
      order_id: '',
      viewerOptions: true,
      activeName: 'first',
      activeNameLog: 'log_first',
      activeNameContract: 'nine_second',
      orderInfo: {},
      bigdata_url: '',
      nodes: [],

      che300DataDetail: {},
      tableKey: 0,
      tableRecord: 1,
      list: null,
      recordTotal: 0,
      total: 0,
      listLoading: true,
      listQuery: {
        page: 1,
        limit: 10,
        real_name: '',
        start: '',
        end: '',
        c_id: '',
        is_settle: ''
      },
      contract_form: {
        company_id: '',
        total_price: '',
        total_period: '',
        a_month_price: '',
        first_price:0,
        all_price:0,
        total_period:0,
        a_month_price:0,
        count_price:0,
        rate: '0.0118',
        money_rate:0,
        benjin:0,
        flow:0,
        days:30,
        bzj:0,
        zlzf:0,
        zlsxf:0,
        gps:0,
        wfkcf:0,
        wzyj:0,
        yljk:0,
        qqkhj:0
      },
      company: [
        {
          id: 1,
          company_name: '成都意得利融资租赁有限公司'
        },
        {
          id: 2,
          company_name: '兴登（成都）融资租赁有限公司'
        }
      ],
      rules: {
        all_price: [{
          required: true,
          message: '总价款必填',
          trigger: 'blur'
        }],
        company_id: [{
          required: true,
          message: '公司必选',
          trigger: 'blur'
        }],
        first_price: [{
          required: true,
          message: '首付金额必填',
          trigger: 'blur'
        }],

        total_price: [{
          required: true,
          message: '融资金额必填',
          trigger: 'blur'
        }],
        a_month_price: [{
          required: true,
          message: '每期金额必填',
          trigger: 'blur'
        }],
        benjin: [{
          required: true,
          message: '每期本金必填',
          trigger: 'blur'
        }],
        flow: [{
          required: true,
          message: '每期流量费必填',
          trigger: 'blur'
        }],
        money_rate: [{
          required: true,
          message: '每期租金收益必填',
          trigger: 'blur'
        }],
        total_period: [{
          required: true,
          message: '期数必选',
          trigger: 'blur'
        }],
        count_price: [{
          required: true,
          message: '租金总额必填',
          trigger: 'blur'
        }],
        days: [{
          required: true,
          message: '每期天数必填',
          trigger: 'blur'
        }],
        first_payment_day: [{
          required: true,
          message: '首次付款日期必填',
          trigger: 'blur'
        }]

      },
      current: 0,
      playerOptions: {

        autoplay: true,
        muted: false,

        height: '600px',
        width: '800px',

        language: 'zh-CN',
        playbackRates: [0.7, 1.0, 1.5, 2.0],
        sources: [{
          type: 'video/mp4',
          src: ''
        }],

        poster: '/static/images/author.jpg',
        controlBar: {
          timeDivider: true, // 当前时间和持续时间的分隔符
          durationDisplay: true, // 显示持续时间
          remainingTimeDisplay: false, // 是否显示剩余时间功能
          fullscreenToggle: true // 是否显示全屏按钮
        }
      },
      form: {
        rate: 0.0115,
        order_status: '',
        total_money: '',
        total_period: '',
        total_percentage: ''
      },
      sale: [],
      che300Data: {
        che300Data: ''
      },
      che300DataFirstPrice: [],
      imagesData: [],
      orderRecord: [],
      customer_info: [],
      request_funds: [],
      order_detail: [],
      ordercontract: {
        first: '',
        first_name: ''
      }
    }
  },
  computed: {

  },
  created() {
    this.listLoading = true
    this.order_id = this.$route.params.order_id
    this.contract_form.order_id = this.order_id
    this.form.order_id=this.order_id
    this.getCustomerInfo(this.order_id)
    this.nodes = getNodes()
    // console.log(this.nodes)
    // this.getImagesData(this.order_id);
    // this.getRequestFunds(this.order_id);
    this.detail()
    
  },
  methods: {
    beforeAvatarUpload(lab) {
      console.log(lab)
    },
    countMoney(lab){
      this.contract_form.first_price = (this.contract_form.all_price-this.contract_form.total_price).toFixed(2)
      this.contract_form.count_price = (this.contract_form.a_month_price*this.contract_form.total_period).toFixed(2)
      this.contract_form.benjin = (this.contract_form.total_price/this.contract_form.total_period).toFixed(2)
      this.contract_form.money_rate = (this.contract_form.total_price*this.contract_form.rate).toFixed(2)
      this.contract_form.a_month_price = Math.ceil(parseFloat(this.contract_form.benjin)+parseFloat(this.contract_form.money_rate)+parseFloat(this.contract_form.flow))
      this.contract_form.qqkhj = 
      Math.ceil(parseFloat(this.contract_form.bzj)+
      parseFloat(this.contract_form.zlzf)+
      parseFloat(this.contract_form.zlsxf)+
      parseFloat(this.contract_form.gps)+
      parseFloat(this.contract_form.wfkcf)+
      parseFloat(this.contract_form.wzyj))
    },
    handSuccess(res, file) {
      if (res.data.field == 'contract') {
        this.imagesData.contract.other.push(
          {
            path: res.data.path,
            field: '其他'
          }
        )
      } else {
        this.request_funds[res.data.field].push(
          {
            path: res.data.path
          }
        )
      }

      // 更新
      const pam = {
        order_id: this.order_id,
        field: res.data.field,
        att_id: res.data.attach_id.id
      }

      this.adminUpload(pam)
    },
    descAdminUpload() {
      this.desc_form.order_id = this.order_id
      this.adminUpload(this.desc_form)
    },
    adminUpload(pam) {
      UploadFileAdmin(pam).then(response => {
        if (response.code == 200) {
          this.$message({
            message: '更新成功',
            type: 'success'
          })
        }
      })
    },
    rotate(e) {
      var ele = e.currentTarget
      this.current = (this.current + 90) % 360
      this.$refs.rotate.style.transform = `rotate(${this.current}deg)`
      // ele.transform = 'translateX(10px)'
    },
    openVideoDialog(path) {
      this.dialogVideoVisible = true
      this.playerOptions.sources[0].src = path
      console.log(this.playerOptions.sources.src)
    },
    UploadUrl: function() {
      return this.action
    },
    UploadSuccessFIrst: function(res) {
      if (res.code == 200) {
        const pam = { order_id: this.order_id, file_path: res.data.path, field: 'first', name: res.data.title }
        contractUpload(pam).then(resp => {
          this.$notify({
            title: '提示',
            message: '修改成功',
            type: 'success',
            duration: 2000,
            onClose: this.getOrcerContract()
          })
        })
      }
    },
    UploadSuccessSecond: function(res) {
      if (res.code == 200) {
        const pam = { order_id: this.order_id, file_path: res.data.path, field: 'second' }
        contractUpload(pam).then(resp => {
          this.$notify({
            title: '提示',
            message: '修改成功',
            type: 'success',
            duration: 2000,
            onClose: this.getOrderDetail()
          })
        })
      }
    },
    handleClick(tab, event) {
      switch (tab.name) {
        case 'second':
          if (this.che300Data.length == 0) {
            this.che300(this.order_id, 1)
          }
          break
        case 'third':
          this.che300(this.order_id, 2)
          break
        case 'fourth':
          if (this.imagesData.length == 0) {
            this.getImagesData(this.order_id)
          }
          break
        case 'fifth':
          if (this.imagesData.length == 0) {
            this.getImagesData(this.order_id)
          }
          if (this.request_funds.length == 0) {
            this.getRequestFunds(this.order_id)
          }
          break

        case 'sixth':
          if (this.orderRecord.length == 0) {
            this.getOrderRecord(this.order_id)
          }
          break
        case 'eight':
          this.bigdataDownLoad(this.order_id)
          break
        case 'nineth':
          this.getOrcerContract()
          this.contractDataAddDetail()
          this.contractApplyDetail()
          break
      }
    },

    returnOrderSubmit(order_id) {
      if (this.form.order_status == '') {
        this.$message.error('请完善信息')
        return
      }
      if (this.form.order_status == 11 && this.form.total_percentage == '') {
        this.$message.error('请完善信息')
        return
      }
      if (this.form.order_status == 40) {
        this.form.jiarong_qs = this.contract_apply_data.jiarong_qs
        this.form.jiarong_money = this.contract_apply_data.jiarong_money
      }
      //console.log(this.form.order_id);return;
      submitCheckStatus(this.form).then(response => {
        if (response.code == 200) {
          this.listRecordLoading = false
          this.$notify({
            title: 'Success',
            message: '操作成功',
            type: 'success',
            duration: 2000,
            // onClose: this.getOrderDetail(),
            onClose: this.detail()
          })
        }
        this.ReviseAble = false
      })
    },

    handleLogClick(tab) {
      this.countMoney(1)
    },
    che300report(code) {
      if (code == 1) {
        window.open(this.che300DataDetail.report_url, 'top')
      } else {
        window.open(this.che300DataDetail.pdf_url, 'top')
      }
    },
    che300(order_id, code) {
      this.listLoading = true
      this.che300DataFirstPrice = []
      const pam = { order_id: order_id, code: code }
      getche300Data(pam).then(response => {
        this.listLoading = false
        if (response.code == 200) {
          if (code == 1) {
            this.che300FirsrAble = true
            this.che300Data = response.data
            this.che300DataFirstPrice = response.data.eval_result.eval_price
          } else {
            this.che300DetailAble = true
            this.che300DataDetail = response.data.data
            window.open(response.data.data.report_url, 'top')
          }
        } else {
          this.$notify({
            title: '失败提示',
            message: response.msg,
            type: 'error',
            duration: 2000,
            // onClose: this.getOrderDetail(),
            onClose: this.listLoading = false
          })
        }
      })
    },
    getOrcerContract() {
      this.listLoading = true
      this.ordercontract = []
      const pam = { order_id: this.order_id }
      getOrcerContract(pam).then(response => {
        this.listLoading = false
        if (response.code == 200) {
          if (response.data) {
            this.ordercontract = response.data
          }
        } else {
          this.$notify({
            title: '失败提示',
            message: response.msg,
            type: 'error',
            duration: 2000,
            // onClose: this.getOrderDetail(),
            onClose: this.listLoading = false
          })
        }
      })
    },
    download(path) {
      window.open(path, 'top')
    },
    downloadDocx(code) {
      const pam = { order_id: this.order_id, code: code }

      downloadDocx(pam).then(response => {
        if (response.code == 200) {
          window.open(response.data.url, 'top')
        }
      })
    },
    detail() {
      fetchOrderDetail(this.order_id).then(response => {
        this.order_detail = response.data
        this.form.order_id = this.order_id
        this.form.total_money = response.data.apply_money
        this.form.total_period = response.data.total_period
        this.form.total_percentage = response.data.total_percentage
        this.listLoading = false
      })
    },
    contractPrint(order_id) {
      this.contractPrintAble = true
      this.order_idd = order_id
    },
    bigdataDownLoad(order_id) {
      this.listLoading = true
      const pam = { order_id: order_id }
      bigdataDownLoad(pam).then(response => {
        if (response.code == 200) {
          window.open(response.data.url, 'top')
          this.bigdata_url = response.data.url
          this.listLoading = false
        } else {
          this.$notify({
            title: '失败提示',
            message: 'PDF生成失败',
            type: 'error',
            duration: 2000,
            // onClose: this.getOrderDetail(),
            onClose: this.listLoading = false
          })
        }
      })
    },
    getCustomerInfo(order_id) {
      this.customerInfoAble = true
      const pam = { order_id: order_id }
      getCustomerInfo(pam).then(response => {
        this.customer_info = response.data
      })
    },
    getRequestFunds(order_id) {
      const pam = { order_id: order_id }
      getRequestFunds(pam).then(response => {
        this.request_funds = response.data
        this.desc_form.desc = response.data.desc
      })
    },
    getOrderRecord(order_id) {
      this.orderRecordAble = true
      const pam = { order_id: order_id }
      getOrderRecord(pam).then(response => {
        this.orderRecord = response.data
      })
    },
    doRevise(row) {
      this.orderInfo = row
      this.form.order_id = row.order_id
      this.form.total_money = row.apply_money
      this.form.total_period = row.total_period
      this.form.total_percentage = row.total_percentage
      this.ReviseAble = true
    },
    getImagesData(order_id) {
      this.imageAble = true
      const pam = { order_id: order_id }
      getImagesData(pam).then(response => {
        this.imagesData = response.data
      })
    },
    contractDataAddDetail() {
      const pam = { order_id: this.order_id }
      contractDataAddDetail(pam).then(response => {
        if (response.data != null) {
          this.contract_form = response.data
        }
      })
    },
    contractApplyDetail() {
      const pam = { order_id: this.order_id }
      contractApplyDetail(pam).then(response => {
        if (response.data != null) {
          this.contract_apply_data = response.data

          if (this.contract_form.total_price == '') {
            this.contract_form.total_price = this.contract_apply_data.apply_money
          }
          if (this.contract_form.total_period == '') {
            this.contract_form.total_period = this.contract_apply_data.total_period
          }
          if (this.contract_form.a_month_price == '') {
            this.contract_form.a_month_price = this.contract_apply_data.a_month_price
          }
        }
      })
    },

    returnContractDatarSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          returnContractDatarSubmit(this.contract_form).then(response => {
            if (response.code == 200) {
              this.listRecordLoading = false
              this.$notify({
                title: 'Success',
                message: '操作成功',
                type: 'success',
                duration: 2000,
                // onClose: this.getOrderDetail(),
                onClose: this.detail()
              })
            }
            this.ReviseAble = false
          })
        } else {
          return false
        }
      })
    },

    deleteContract(id) {
      const pam = { id: id }
      deleteContract(pam).then(response => {
        this.getOrcerContract()
      })
    }
  }
}
</script>
<style>
.downloadComtractModel{
  width: 150px;margin-left:50%;transform: translateX(-50%);font-size: 15px;color: #66cccc;margin-top: 20px;cursor: pointer;text-decoration:underline
}
.myform{
  padding-right: 50px;
  margin-left: 30%;

  background: #fff;
  border-radius: 10px;
  margin-top: 20px;
  padding-bottom: 50px;
  padding-top: 50px;
}
.yyy{
  width: 100%;
  height: 700px;

}
.xxx{
  width: 100%;
  height: 100%;
  overflow: auto;
}
.app-main{
  background: #f5f5f5;
}
.tabs1{
  width: 96%;
  height: 800px;
  overflow: auto;
  background: #fff;
  border: 1px solid #f5f5f5;
  margin: 2%;
  padding-left:2%;
  border-radius: 10px;
}
.contractbox{
  height: 40px;
  color: #00b38a;
  line-height: 50px;
  cursor: pointer;
}
.ima_title{
  font-size: 15px;
  height: 30px;
}
.box {
    margin-left: 50px;
    margin-right: 50px;
  }
  .l_title {
    font-size: 14px;
    font-weight: 700;
    margin-top:20px
  }
  .infolist_top {
    margin-top: 10px;

  }
  .infolist {
    color: #333;
    font-size: 13px;
    margin-left: 10px;
    height: 20px;
    border-bottom: 1px solid #eee;
  }

  .shakoe {
    color: #333;
    font-size: 13px;
    margin-left: 10px;
    height: 20px;

  }

  .infolist_file {
    color: #1890FF;
    font-size: 15px;
    margin-left: 10px;
  }
  .img_box {
    width: 150px;
    height: 150px;
    margin-left: 16px;
    float: left;
    position: relative;
    margin-bottom: 40px;
  }
  .hovers {
    position: absolute;
    top: 155px;
    width: 100%;
    background: #fff;
    color: #333;
    text-align: center;
  }
  .che300table td{
    border-collapse: collapse;
    height: 40px;
    font-size: 14px;
    border: 1px solid #ccc;
    padding-left: 10px;
  }

  .che300table {
    border-collapse: collapse;
    width: 50%;

  }
  .td_title{
    width: 40%;
    text-align: left;
  }
  .td_value{
    text-align: left;
  }
</style>
